<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>地图与路径规划</title>
  <style>
    html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; }
  </style>
  <!-- 引入HMS地图JS SDK -->
  <script src="https://mapapi.cloud.huawei.com/mapApi/jsapi?key=DQEDAEFlLjJwe2KhjvhweSaibcYMQe+98aiE+J3SuuKyZ9yi93q5Gt+BhNkemDZGzycmObzPaoztzbOaqM+HgS4CBei1+qG9/PrQ/g=="></script>
</head>
<body>
  <div id="param-debug" style="position:fixed;top:0;left:0;width:100%;background:#fffbe6;color:#d48806;font-size:16px;z-index:9999;padding:8px 0;text-align:center;border-bottom:1px solid #ffe58f;"></div>
  <div id="map"></div>
  <script>
    // 获取URL参数
    function getQueryParam(name) {
      const url = window.location.search;
      const params = new URLSearchParams(url);
      return params.get(name);
    }
    const startLat = parseFloat(getQueryParam('startLat'));
    const startLng = parseFloat(getQueryParam('startLng'));
    const endLat = parseFloat(getQueryParam('endLat'));
    const endLng = parseFloat(getQueryParam('endLng'));

    // 更明显的调试参数输出
    document.getElementById('param-debug').innerText =
      `调试参数：startLat=${startLat}, startLng=${startLng}, endLat=${endLat}, endLng=${endLng}`;
    console.log('收到参数:', startLat, startLng, endLat, endLng);

    if (isNaN(startLat) || isNaN(startLng) || isNaN(endLat) || isNaN(endLng)) {
      document.getElementById('map').innerHTML = '<div style="color:red;text-align:center;margin-top:40px;">经纬度参数有误，无法显示地图</div>';
      throw new Error('经纬度参数有误');
    }

    // 初始化地图
    const map = new HMap("map", {
      center: { lat: startLat, lng: startLng },
      zoom: 10
    });
    console.log('地图初始化完成');

    // 添加起点和终点标记
    new HMap.Marker({
      position: { lat: startLat, lng: startLng },
      map: map,
      title: "我"
    });
    new HMap.Marker({
      position: { lat: endLat, lng: endLng },
      map: map,
      title: "买家"
    });
    console.log('标记已添加');

    // 路径规划（官方推荐写法，优先driving，失败降级walking）
    function drawRoute(apiType) {
      console.log('请求路径规划:', apiType);
      fetch(`https://siteapi.cloud.huawei.com/mapApi/v1/routeService/${apiType}?key=DQEDABkf0PLrCWpJZ7b6b+joKbfWfROQ9VVcSOr1aKtiCo7myLY6ArXYJyg/BYYmrR682X+/AfyHQ/1xTGEtBRtt6ob2LfiWsMmPqg==`)
      .then(response => response.json())
      .then(data => {
        console.log('路径规划返回数据:', data);
        if (data.routes && data.routes.length > 0) {
          const path = data.routes[0].paths[0].steps.flatMap(step => step.polyline.map(p => ({ lat: p.lat, lng: p.lng })));
          new HMap.Polyline({
            path: path,
            map: map,
            strokeColor: '#2196F3',
            strokeWeight: 5
          });
          // 自动缩放到合适视野
          const bounds = new HMap.LatLngBounds();
          path.forEach(p => bounds.extend(p));
          map.fitBounds(bounds);
          console.log('路径已绘制');
        } else if (apiType === 'driving') {
          drawRoute('walking');
        } else {
          document.getElementById('map').innerHTML = '<div style="color:red;text-align:center;margin-top:40px;">未能获取到路径规划数据</div>';
        }
      })
      .catch(err => {
        if (apiType === 'driving') {
          drawRoute('walking');
        } else {
          document.getElementById('map').innerHTML = '<div style="color:red;text-align:center;margin-top:40px;">路径规划失败</div>';
        }
        console.error('路径规划失败', err);
      });
    }
    drawRoute('driving');
  </script>
</body>
</html> 